
import React from 'react'
import {Card,Row,Col,Button,Icon,Form,message,Modal,Input ,Spin} from 'antd';
import moment from 'moment';
import {Link} from 'react-router-dom'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import LeftMenu from 'component/leftmenu/index.jsx';
import HeadImgContent from 'component/headimgcontent/index.jsx';
import LeftMenuItem from 'component/leftmenuitem/index.jsx';
import Verify from 'component/verify/index.jsx';


import MMUtile from 'util/mm.jsx'
import Safty from 'service/safty-service.jsx'
const _mm = new MMUtile();
const _safty = new Safty();


const FormItem = Form.Item;


let residences = [];	

let userInfo = _mm.getStorage('userInfo')?JSON.parse(_mm.getStorage('userInfo')):{};
class UpdatepswForm extends React.Component{
	constructor(props){
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state = {
			sex:'M',
			birthday:'',
			bloodtype:'',
			idcard:'',
			autograph:'',
			items:[{'name':'修改密码','actived':true,'link':'','icon':'edit'},
			{'name':'密保设置','actived':false,'link':'/security','icon':'key'},
			{'name':'绑定手机','actived':false,'link':'/updatephone','icon':'mobile'},
			{'name':'登录邮箱','actived':false,'link':'/updateemail','icon':'mail'},
			{'name':'登录记录','actived':false,'link':'/recordsafty','icon':'profile'}],
			phone:'',
			visible: false,
			isCodeRight:false,
			loading:true
		}

	}

	componentDidMount(){
		//获取手机号
		_safty.getUserPhone().then((res)=>{
			this.setState({
				phone:res?res:'',
				loading:false
			})
		},(errMsg)=>{
			
			this.setState({
				loading:false
			})
			_mm.errorTips(errMsg)
		})
	}
	
	componentWillUpdate(){
		userInfo = _mm.getStorage('userInfo')?JSON.parse(_mm.getStorage('userInfo')):{};
	}
  handleCancel(e){
    this.setState({
      visible: false,
    });
  }
  handleCancelCode(e){
    this.setState({
      isCodeRight: false,
    });
  }

	handleSubmit(e){
		e.preventDefault();
	  this.props.form.validateFields((err, values) => {
	    if(values.password.length>=6){
				_safty.updatePassword({
					password:values.password
				}).then((res)=>{
					message.success('恭喜您，密码修改成功');
					this.setState({
			      isCodeRight: false,
			    });
				},(errMsg)=>{
					_mm.errorTips(errMsg);
				})
	    }else{
	    	message.error('请输入大于等于6位数的密码')
	    }
	  });
	}
	showVerify(e){
		if(!!this.state.phone){
			this.setState({
	      visible: true,
	    });
		}else{
			message.error('请先绑定手机号码')
		}
	}
	getIsCodeRight(callback){
		this.setState({
			visible:false,
			isCodeRight:callback.isCodeRight
		})
	}
	render(){
    const { getFieldDecorator } = this.props.form;
		return(
			
			<div>
				<Row gutter={24}>
					<Col span={7}>
		        <Card bordered={true} className="itemminheight"><LeftMenuItem items={this.state.items}></LeftMenuItem></Card>
		      </Col>
		      <Col span={17}>
		      	<Spin spinning={this.state.loading}   size="large">
		      	<Card title="修改密码" bordered={false}>
		      		<p>建议使用字母、数字与标点的组合，可以大幅提升帐号安全</p>
		          <Button
		          	size="large"
		            type="primary"
		            onClick={this.showVerify.bind(this)}
		          >
		            修改密码
		          </Button>
		          <Modal
			          title="校验手机"
			          visible={this.state.visible}
          			onCancel={this.handleCancel.bind(this)}
			          footer={null}
			        >
			          <Verify phone={userInfo.phone} email={userInfo.email} getIsCodeRight={this.getIsCodeRight.bind(this)}></Verify>
			        </Modal>			        
		          <Modal
			          title="密码修改保存"
			          visible={this.state.isCodeRight}
          			onCancel={this.handleCancelCode.bind(this)}
			          footer={null}
			        >
			          <Form onSubmit={(e)=>{this.handleSubmit(e)}} className="login-form">
					        <FormItem>
					        	{getFieldDecorator('password', {
					            
					          })(
			                <div style={{textAlign:'center'}}><Input type="password" style={{width:'200px'}} placeholder="请输入您的新密码" /></div>
			              )}
					            
					        </FormItem>
					        <FormItem>
					          <div style={{textAlign:'center'}}><Button type="primary" htmlType="submit" className="login-form-button">
					            提交
					          </Button></div>
					        </FormItem>
					      </Form>
			        </Modal>
		      		<p></p>
		      		<p>无法通过密保验证？</p>
		      		<p>您可以进行<Link to="/">帐号申诉</Link>，客服在核实您的身份后可为您重置密码</p>
		      		<p>如果您还未绑定手机号，请先<Link to="/">绑定手机号</Link>，才能修改密码</p>
			      </Card>
						</Spin>
		      </Col>
				</Row>
			</div>
		)
	}
}
const Updatepsw = Form.create()(UpdatepswForm);
export default Updatepsw;